<template>
  <div :style="{ height: clientHeight }" class="topDiv">
    <Row :gutter="20">
      <!-- 主体部分 -->
      <div class="body">
        <!--logo标题图片 -->
<!--        <img class="title" src="../../assets/logo.png" alt=""/>-->
        <!--第二排内容 -->
        <div class="awayMenu">
          <!--左侧 -->
          <div class="awayLeft">
            <span class="manage2">
              欢迎
              <!--用户名称 -->
              <span>{{ name }}</span>
            </span>
          </div>
          <!--时间，上下布局 -->
          <div class="bottom">
            <!--年月日 -->
            <span class="showtime">{{ showtime }}</span>
            <!--时分 -->
            <span class="showtime2">{{ showtime2 }}</span>
          </div>
        </div>
        <!--三层标题 -->
        <div class="bigTips">
          <span style="color:rgba(255,255,255,0.8)">常用模块</span>
          <span style="width:67.5%"> </span>
        </div>
        <!--常用按钮层 -->
        <div class="buttonMenu">
          <!--常用按钮盒子 -->
          <div class="addMenuBox">
            <!--循环遍历按钮 -->
            <div class="addMenu" v-for="(item, index) in addMenuTempList" :key="index" @click="selectItem(item)">
              {{ item.title }}
            </div>
          </div>
<!--          &lt;!&ndash;分隔线 &ndash;&gt;-->
<!--          <div class="shu"></div>-->
        </div>
        <!--左下角提升语句，点击跳转盒子-->
        <div class="bottomText" @click="toOwnMenu">
          添加"常用模块"? 点我 进入个人门户设置
        </div>
      </div>
    </Row>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import {
  ipInfo,
  getMyDoorList6
} from "./api.js";

export default {
  name: "home",
  data() {
    return {
      name: "",
      showtime: "",
      showtime2: "",
      location: "内网",
      addMenuTempList: [],
      number1: 0,
      number2: 0,
      number3: 0,
      number1List: [],
      number2List: [],
      number3List: []
    };
  },

  methods: {
    init() {
      this.getMyDoorListFx();
      let user = JSON.parse(Cookies.get("userInfo"));
      this.name = user.nickname;
      this.getNowTime();
      ipInfo().then((res) => {
        if (res.success) {
          this.location = res.result;
        }
      });
      this.timer = setInterval(this.getNowTime, 1000);
    },
    selectItem(e) {
      if (e.name != undefined && e.name != "null") {
        this.$router.push({
          name: e.name,
        });
      }
    },

    toOwnMenu() {
      this.$router.push("/myHome");
    },
    getMyDoorListFx() {
      var that = this;
      getMyDoorList6().then((res) => {
        that.addMenuTempList = res.result;
      });
    },
    getNowTime() {
      this.showtime = this.format(new Date(), "yyyy年MM月dd日");
      this.showtime2 = this.format(new Date(), "HH:mm:ss");
    },
    goToAIConsultation() {
      this.$router.push({
        name: 'medical_consultation'
      });
    }
  },
  mounted() {
    this.init();
    this.clientHeight = `${document.documentElement.clientHeight}`;
    let that = this;
    window.onresize = function () {
      this.clientHeight = `${document.documentElement.clientHeight}`;
      if (that.$refs.page) {
        that.$refs.page.style.minHeight = clientHeight - 100 + "px";
      }
    };
  },
  watch: {
    clientHeight() {
      this.changeFixed(this.clientHeight);
    },
  },
};
</script>

<style lang="less" scoped>
@import "./home.less";

.ivu-tooltip {
  width: 100% !important;
}

.margin {
  margin-bottom: 20px;
}

.awayLeft {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center; /* 添加居中对齐 */
}

.bottom {
  width: 30%;
  margin-left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  width: 15%;
  margin: 5vh auto; /* 调整居中对齐 */
  max-height: 80px;
}

.awayMenu {
  width: 100%;
  display: flex;
  justify-content: center; /* 修改为居中对齐 */
  align-items: center;
}

.manage {
  width: 40%;
  height: 100%;
  font-family: Microsoft YaHei;
  font-size: 20px;
  display: flex;
  align-items: center;
  color: #2c3e50;
  justify-content: center;
}

.manage2 {
  width: 60%;
  height: 100%;
  font-size: 28px;
  display: flex;
  align-items: center;
  color: #2c3e50;
  justify-content: center;
}

.buttonMenu {
  width: 100%;
  display: flex;
  justify-content: center; /* 修改为居中对齐 */
}

.bigTips {
  width: 100%;
  display: flex;
  justify-content: center; /* 修改为居中对齐 */
  align-items: center;
  margin-top: 3vh;
  margin-bottom: 3vh;
  font-size: 20px;
  
  span {
    color: #2c3e50 !important;
  }
}

.addMenuBox {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;

  .addMenu {
    width: 45%;
    height: 22%;
    margin: 2% 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3498db;
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
    }
  }
}

.shu {
  width: 0.2%;
  margin: 0 9.9%;
  background-color: #4c4c4c;
}

.threeButton {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.showtime {
  font-family: Microsoft YaHei;
  font-size: 22px;
  letter-spacing: 1px;
  color: #2c3e50;
  font-weight: 100;
  text-align: center;
}

.showtime2 {
  font-family: Microsoft YaHei;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #2c3e50;
  text-align: center;
}

.homeThreeIcon {
  opacity: 1;
  height: 25px;
  width: 25px;
  margin-right: 10%;
}

.button {
  width: 60%;
  height: 28%;
  min-width: 310px;
  max-width: 860px;
  max-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto;
  z-index: 99;

  .left {
    width: 60%;
    min-width: 150px;
    display: flex;
    align-items: center;
  }

  .text {
    color: #fff;
    font-size: 20px;
    position: relative;
  }

  .shu {
    width: 1px !important;
    height: 100%;
    max-height: 35px;
    background-color: #fff;
  }

  .number {
    font-size: 22px;
    color: #fff;
  }
}

.bottomText {
  opacity: 0.8;
  width: 100%;
  margin-top: 7vh;
  text-align: center;
  font-size: 16px;
  color: #3498db;
  text-decoration: underline;
  transition: all 0.3s ease;
  
  &:hover {
    opacity: 1;
    color: #2980b9;
  }
}

.textBox {
  width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 修改为居中对齐 */
  padding: 0 10%;

  .text {
    font-size: 16px;
    margin: 3px 0;
    border-bottom: 1px solid #777;

    .one {
      display: flex;
      align-items: center;

      .xuhao {
        width: 20%;
        min-width: 50px;
        background-color: #ff9900;
        border: 1px solid #ff9900;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .yuanyin {
        width: 20%;
        min-width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .zhuangtai {
        width: 60%;
        min-width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.feature-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: #007bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.medical-icon {
  font-size: 24px;
  color: white;
}

.card-content {
  flex: 1;
}

.card-content h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  margin-bottom: 4px;
}

.card-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.card-arrow {
  color: #999;
  font-size: 20px;
}

@media (max-width: 640px) {
  .feature-cards {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}
</style>
